<template>
    <div class="main-con generalConfiguration">
        <!-- 首页标题栏 -->
        <div class="main-title">
            骑手通用配置
        </div>

        <!-- 表单信息 -->
        <div class="form-con">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" class="demo-ruleForm">
                <h2 class="item-title">
                    派单设置
                </h2>
                <div class="form-item-con">
                    <el-form-item label="第三方未接单间隔：" prop="takeTime">
                        <div class="form-item">
                            <div class="form-item-input" style="margin-left: 0px;">
                                <el-input size="small" v-model="ruleForm.takeTime"></el-input>
                            </div>
                            <div>分钟</div>
                        </div>
                    </el-form-item>
                    <el-form-item label="忙碌单量上限：" prop="maxOrder">
                        <div class="form-item">
                            <div class="form-item-input" style="margin-left: 0px;">
                                <el-input size="small" v-model="ruleForm.maxOrder"></el-input>
                            </div>
                            <div>单</div>
                        </div>
                    </el-form-item>
                    <el-form-item label="京东呼叫骑手时间：" prop="mtSortTime">
                        <div class="form-item">
                            <div class="form-item-input" style="margin-left: 0px;">
                                <el-input size="small" v-model="ruleForm.mtSortTime"></el-input>
                            </div>
                            <div>分钟</div>
                        </div>
                    </el-form-item>
                    <el-form-item label="美团自动分拣时间：" prop="jdSortTime">
                        <div class="form-item">
                            <div class="form-item-input" style="margin-left: 0px;">
                                <el-input size="small" v-model="ruleForm.jdSortTime"></el-input>
                            </div>
                            <div>分钟</div>
                        </div>
                    </el-form-item>
                </div>
                <h2 class="item-title">
                    距离设置
                </h2>
                <div class="form-item-con">
                    <el-form-item label="取货距离限制：" required>
                        <el-switch v-model="ruleForm.isPickDistanceOpen" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
                    </el-form-item>
                    <el-form-item label="范围：" prop="pickDistance">
                        <div class="form-item">
                            <div class="form-item-input" style="margin-left: 0px;">
                                <el-input size="small" v-model="ruleForm.pickDistance"></el-input>
                            </div>
                            <div>m</div>
                        </div>
                    </el-form-item>
                    <el-form-item label="送达距离限制：" required>
                        <el-switch v-model="ruleForm.isArrivedDistanceOpen" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
                    </el-form-item>
                    <el-form-item label="范围：" prop="arrivedDistance">
                        <div class="form-item">
                            <div class="form-item-input" style="margin-left: 0px;">
                                <el-input size="small" v-model="ruleForm.arrivedDistance"></el-input>
                            </div>
                            <div>m</div>
                        </div>
                    </el-form-item>
                </div>
                <div class="submit-btn-con">
                    <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
                </div>
            </el-form>
        </div>
    </div>
</template>

<script>
import {
    queryGeneralConfigurationInfo,
    saveGeneralConfigurationInfo
} from "@/common/service/horsemanManagement/generalConfiguration.js";
export default {
    name: "generalConfiguration",
    data() {
        return {
            ruleForm: {
                takeTime: "",
                maxOrder: "",
                mtSortTime: "",
                jdSortTime: "",
                isPickDistanceOpen: true,
                pickDistance: "",
                isArrivedDistanceOpen: true,
                arrivedDistance: ""
            },
            rules: {
                takeTime: [
                    {
                        required: true,
                        message: "请输入第三方未接单间隔",
                        trigger: "blur"
                    }
                ],
                maxOrder: [
                    {
                        required: true,
                        message: "请输入忙碌单量上限",
                        trigger: "blur"
                    }
                ],
                mtSortTime: [
                    {
                        required: true,
                        message: "请输入京东呼叫骑手时间",
                        trigger: "blur"
                    }
                ],
                jdSortTime: [
                    {
                        required: true,
                        message: "请输入美团自动分拣时间",
                        trigger: "blur"
                    }
                ],
                pickDistance: [
                    {
                        required: true,
                        message: "请输入取货距离范围",
                        trigger: "blur"
                    }
                ],
                arrivedDistance: [
                    {
                        required: true,
                        message: "请输入送达距离范围",
                        trigger: "blur"
                    }
                ]
            }
        };
    },
    created() {
        //初始化表格数据
        this._queryGeneralConfigurationInfo();
    },
    methods: {
        /*----------------------------查询操作----------------------------*/
        //查询操作记录信息表格数据
        _queryGeneralConfigurationInfo() {
            queryGeneralConfigurationInfo()
                .then(res => {
                    this.ruleForm.maxOrder = res.maxOrder;
                    this.ruleForm.takeTime = res.takeTime;
                    this.ruleForm.mtSortTime = res.mtSortTime;
                    this.ruleForm.jdSortTime = res.jdSortTime;
                    if (res.isPickDistanceOpen == 1) {
                        this.ruleForm.isPickDistanceOpen = true;
                    } else {
                        this.ruleForm.isPickDistanceOpen = false;
                    }
                    this.ruleForm.pickDistance = res.pickDistance;

                    if (res.isArrivedDistanceOpen == 1) {
                        this.ruleForm.isArrivedDistanceOpen = true;
                    } else {
                        this.ruleForm.isArrivedDistanceOpen = false;
                    }
                    this.ruleForm.arrivedDistance = res.arrivedDistance;
                })
                .catch(err => {
                    this.$message.error(err.message);
                });
        },

        /*----------------------------保存操作----------------------------*/
        //表单校验
        submitForm(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    this._saveGeneralConfigurationInfo();
                } else {
                    return false;
                }
            });
        },
        //保存社区高级设置的信息
        _saveGeneralConfigurationInfo() {
            var isPickDistanceOpen = 1;
            if (this.ruleForm.isPickDistanceOpen == true) {
                isPickDistanceOpen = 1;
            } else {
                isPickDistanceOpen = 0;
            }
            var isArrivedDistanceOpen = 1;
            if (this.ruleForm.isArrivedDistanceOpen == true) {
                isArrivedDistanceOpen = 1;
            } else {
                isArrivedDistanceOpen = 0;
            }

            var data = {
                takeTime: this.ruleForm.takeTime,
                maxOrder: this.ruleForm.maxOrder,
                mtSortTime: this.ruleForm.mtSortTime,
                jdSortTime: this.ruleForm.jdSortTime,
                isPickDistanceOpen: isPickDistanceOpen,
                pickDistance: this.ruleForm.pickDistance,
                isArrivedDistanceOpen: isArrivedDistanceOpen,
                arrivedDistance: this.ruleForm.arrivedDistance
            };
            saveGeneralConfigurationInfo(data)
                .then(res => {
                    this.$message.success("保存成功！");
                    this._queryGeneralConfigurationInfo();
                })
                .catch(err => {
                    this.$message.error(err.message);
                });
        }
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.form-item {
    display: flex;
    align-items: center;
    color: #666;
}
.form-item-input {
    width: 80px;
    margin: 0 15px;
}
</style>